<template>
    <div>
<el-header>
        <h3>电商管理后台系统</h3>
        <div>
          <el-button type="info" size="small" @click="logout">退出</el-button>
        </div>
      </el-header>
      <el-container>
        <el-aside ref="left1" :width="isshow?'65px':'200px'">
          <header><span @click="isshow=!isshow">|||</span></header>
          <el-menu :unique-opened="true" @select="select" :collapse="isshow" router :default-active="active" class="el-menu-vertical-demo" background-color="#303133" text-color="#fff" active-text-color="#ffd04b">
            <el-submenu :index="index+'1'" v-for="(item,index) in menus" :key="index">
              <template slot="title">
                <i :class="icons[index]"></i>
                <span>{{item.authName}}</span>
              </template>
              <el-menu-item-group>
                <el-menu-item :index="ite.path" v-for="(ite,ind) in item.children" :key="ind">
                  <i class="el-icon-menu"></i>
                  <span slot="title">{{ite.authName}}</span>
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </div>
</template>
<script>
import { menusList } from "../api/api.js";
export default {
  data() {
    return {
      menus: [],
      icons: [
        "el-icon-user-solid",
        "el-icon-s-tools",
        "el-icon-s-goods",
        "el-icon-s-order",
        "el-icon-s-data"
      ],
      isshow: false,
      active: "users"
    };
  },
  async mounted() {
    let res = await menusList();
    this.menus = res.data;
     this.active=localStorage.getItem("path")
  },
  methods: {
    logout() {
      this.$confirm("你确定要退出吗", "提示", {
        type: "warning"
      })
        .then(() => {
          localStorage.removeItem("token");
          this.$router.push("/admin/login");
          this.$message({
            type: "success",
            message: "退出成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
    },
    tc() {
      this.$store.dispatch("tc");
    },
    select(data) {
      console.log(data);
      localStorage.setItem("path", data);
    }
  }
};
</script>

<style lang='scss' scoped >
.el-header {
  background: #808080;
  display: flex;
  justify-content: space-between;
  align-items: center;
  h3 {
    color: #fff;
  }
}
</style>

